<template>
    <nav :class="cns">
        <slot></slot>
    </nav>
</template>
<script lang="ts">
import { defineComponent, provide, inject, toRef, computed, Ref, ref } from 'vue'
import { TreeNode } from './struct'
export default defineComponent({
    name:"Menu",
    props:{
        theme:{
            type:String
        },
        current:{type:String}
    },
    setup(props,{emit}){
        const toggleAside = inject("phToggleAside") as (f?:boolean,role?:string)=>void
        const matchedPaths = ref<TreeNode[]>([])
        provide('matchedPaths',matchedPaths)
        provide('current',toRef(props,'current'))
        provide('notifyRootMenu',(action:string,paths:Array<TreeNode>)=>{
            matchedPaths.value = paths
            emit("action",action,paths)
            toggleAside&&toggleAside(false,"menu")
        })
        provide('getParentMenu',()=>[])
        provide('expandParent',()=>1)
        
        const topTheme = inject<Ref<string>>("theme")
        const cns = computed(()=>{
            const theme = props.theme||topTheme?.value||"dark"
            return ['ph-menu','ph-menu-root','ph-menu-'+theme]
        })
        return {
            cns
        }
    }
})
</script>
<style lang="scss">
@import './menu.scss';
</style>
